<template>
  <div class="detail-container">
    <!-- 商品信息区域 -->
    <div class="product-section">
      <div class="product-container">
          <!-- 商品图片 -->
          <div class="product-image-section">
            <!-- 图片展示区域（缩略图+主图） -->
            <div class="image-display-area" v-if="currentView === 'gallery'">
              <!-- 左侧缩略图列表 -->
              <div class="thumbnail-list">
                <div 
                  v-for="(img, index) in imageList" 
                  :key="index"
                  class="thumbnail-item"
                  :class="{ active: currentImageIndex === index }"
                  @click="selectImage(index)">
                  <el-image
                    :src="img"
                    fit="contain">
                  </el-image>
                </div>
              </div>
              
              <!-- 主图展示 -->
              <div class="main-image-wrapper"
                   @mouseenter="handleMouseEnter"
                   @mouseleave="handleMouseLeave">
                <el-image
                  class="product-image"
                  :src="currentImage"
                  :preview-src-list="imageList"
                  fit="contain">
                </el-image>
                
                <!-- 切换按钮 -->
                <div class="image-nav-buttons">
                  <button 
                    class="nav-btn prev-btn" 
                    @click="prevImage">
                    <i class="el-icon-arrow-left"></i>
                  </button>
                  <button 
                    class="nav-btn next-btn" 
                    @click="nextImage">
                    <i class="el-icon-arrow-right"></i>
                  </button>
                </div>
                
                <!-- 图片指示器 -->
                <div class="image-indicator">
                  {{ currentImageIndex + 1 }} / {{ imageList.length }}
                </div>
                
                <!-- 轮播状态指示器 -->
                <div class="autoplay-indicator" v-if="isAutoPlaying">
                  <i class="el-icon-video-play"></i> 自动播放中
                </div>
              </div>
            </div>
            
            <!-- 参数信息表 -->
            <div v-if="currentView === 'params'" class="params-table-wrapper">
              <h3 class="params-title">参数信息</h3>
              <table class="params-table">
                <tbody>
                  <!-- 第一行 -->
                  <tr>
                    <td class="param-label">{{ itemParams.pvcSeries || 'pvc系列' }}</td>
                    <td class="param-value">{{ itemParams.hotSeries || '热门系列' }}</td>
                    <td class="param-label">{{ itemParams.animeRegion || '中国大陆' }}</td>
                    <td class="param-value">{{ itemParams.depositInfo || '定金（首注电话，包...）' }}</td>
                  </tr>
                  <tr>
                    <td class="param-sublabel">PVC系列</td>
                    <td class="param-sublabel">热门系列</td>
                    <td class="param-sublabel">动漫地区</td>
                    <td class="param-sublabel">{{ itemParams.size || '尺寸' }}</td>
                  </tr>
                  
                  <!-- 第二行 -->
                  <tr>
                    <td class="param-label">{{ itemParams.material || 'PVC' }}</td>
                    <td class="param-value">{{ itemParams.acgCharacterName || '白月魁' }}</td>
                    <td class="param-label">{{ itemParams.scaleRatio || '1/6' }}</td>
                    <td class="param-value">{{ itemParams.style || '静态' }}</td>
                  </tr>
                  <tr>
                    <td class="param-sublabel">材质</td>
                    <td class="param-sublabel">ACG角色名</td>
                    <td class="param-sublabel">比例</td>
                    <td class="param-sublabel">款式</td>
                  </tr>
                  
                  <!-- 其他参数 -->
                  <tr>
                    <td class="param-label-left">高度</td>
                    <td class="param-value-left">{{ itemParams.height || '312mm' }}</td>
                    <td class="param-label-left">品牌</td>
                    <td class="param-value-left">{{ itemParams.brand || '否极' }}</td>
                  </tr>
                  
                  <tr>
                    <td class="param-label-left">作品来源</td>
                    <td class="param-value-left">{{ itemParams.workSource || '动漫' }}</td>
                    <td class="param-label-left">出售状态</td>
                    <td class="param-value-left">{{ itemParams.saleStatus || '全款预售' }}</td>
                  </tr>
                  
                  <tr>
                    <td class="param-label-left">适用年龄</td>
                    <td class="param-value-left">{{ itemParams.applicableAge || '18周岁以上' }}</td>
                    <td class="param-label-left">适用年龄（...</td>
                    <td class="param-value-left">{{ itemParams.applicableAgeAlt || '15岁及以上' }}</td>
                  </tr>
                  
                  <tr>
                    <td class="param-label-left">颜色分类</td>
                    <td class="param-value-left" colspan="3">{{ itemParams.colorClassification || '全款798，定金158，尾款640' }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 图集/参数切换按钮 -->
            <div class="view-toggle-buttons">
              <button 
                class="toggle-btn" 
                :class="{ active: currentView === 'gallery' }"
                @click="switchView('gallery')">
                图集
              </button>
              <button 
                class="toggle-btn" 
                :class="{ active: currentView === 'params' }"
                @click="switchView('params')">
                参数
              </button>
            </div>
            
            <!-- 商品详情部分（移到左侧区域） -->
            <div class="detail-section-inline">
              <h2 class="detail-title">商品详情</h2>
              <div class="detail-content" v-html="proUrl"></div>
            </div>
          </div>
        
        <!-- 商品信息 -->
        <div class="product-info-section">
          <!-- 商品标题 -->
          <h1 class="product-title">{{ itemData.title }}</h1>
          
          <!-- 销售标签 -->
          <div class="sales-tags">
            <span class="tag">超700人加购</span>
            <span class="tag">¥{{ itemData.price }} 已售100+</span>
          </div>
          
          <!-- 价格 -->
          <div class="price-section">
            <span class="main-price">¥{{ itemData.price }}</span>
          </div>
          
          <!-- 配送信息 -->
          <div class="shipping-info">
            <p class="shipping-text">
              预售, 120天内发货 快递: 免运费 广东惠州至
              <span v-if="selectedAddress" class="selected-address-display">
                {{ selectedAddress.address }}{{ selectedAddress.addDetail }}
              </span>
              <span v-else class="placeholder-address-display">
                请选择收货地址
              </span>
              <span class="required">*</span>
            </p>
            <p class="return-policy">不支持7天无理由退货 极速退款√</p>
            <p class="payment-method">信用卡支付①</p>
          </div>
          
          <!-- 商品选项 -->
          <div class="options-section">
            <div class="option-group">
              <label class="option-label">尺寸 <span class="required">*</span></label>
              <div class="option-buttons">
                <button 
                  class="option-btn" 
                  :class="{ active: selectedOptions.size === 'deposit' }"
                  @click="selectSize('deposit')">
                  {{ itemOption.sizeOption1 || '定金(备注电话,包邮+特典)' }}
                </button>
                <button 
                  class="option-btn" 
                  :class="{ active: selectedOptions.size === 'full' }"
                  @click="selectSize('full')">
                  {{ itemOption.sizeOption2 || '全款798,定金158,尾款640' }}
                </button>
              </div>
            </div>
            
            <div class="option-group">
              <label class="option-label">颜色分类 <span class="required">*</span></label>
              <div class="option-buttons">
                <button 
                  class="option-btn" 
                  :class="{ active: selectedOptions.color === 'standard' }"
                  @click="selectColor('standard')">
                  {{ itemOption.colorOption1 || '标准版' }}
                </button>
                <button 
                  class="option-btn" 
                  :class="{ active: selectedOptions.color === 'deluxe' }"
                  @click="selectColor('deluxe')">
                  {{ itemOption.colorOption2 || '豪华版' }}
                </button>
              </div>
            </div>
          </div>
          
          <!-- 协议 -->
          <div class="agreement-section">
            <label class="option-label">协议 <span class="required">*</span></label>
            <button 
              class="option-btn" 
              :class="{ active: selectedOptions.agreement }"
              @click="toggleAgreement">
              {{ itemOption.agreementText || '下单同意定金虚拟发货' }}
            </button>
          </div>
          
          <!-- 配送地址选择 -->
          <div class="option-group">
            <label class="option-label">配送至 <span class="required">*</span></label>
            <div class="option-buttons">
              <button
                v-for="addr in userAddresses"
                :key="addr.id"
                class="option-btn"
                :class="{ active: selectedAddress && selectedAddress.id === addr.id }"
                @click="selectAddress(addr)">
                {{ addr.address }}{{ addr.addDetail }}
              </button>
              <p v-if="userAddresses.length === 0" class="no-address-tip">
                暂无收货地址，请前往个人中心添加。
              </p>
            </div>
          </div>
          
          <!-- 数量选择 -->
          <div class="quantity-section">
            <label class="option-label">数量</label>
            <div class="quantity-control">
              <button class="quantity-btn" @click="decreaseQuantity">-</button>
              <span class="quantity-display">{{ num }}</span>
              <button class="quantity-btn" @click="increaseQuantity">+</button>
            </div>
            <span class="stock-status">即将售罄</span>
          </div>
          
          <!-- 操作按钮区域 -->
          <div class="action-section">
            <button 
              class="action-btn add-cart" 
              :class="{ disabled: !canAddToCart }"
              :disabled="!canAddToCart"
              @click="addCart">
              <i class="el-icon-s-goods"></i>
              {{ canAddToCart ? '加入购物车' : '请选择所有选项' }}
            </button>
            <button 
              class="action-btn buy-now" 
              :class="{ disabled: !canBuyNow }"
              :disabled="!canBuyNow"
              @click="buy">
              <i class="el-icon-check"></i>
              {{ canBuyNow ? '立即购买' : '请选择所有选项' }}
            </button>
            <div class="favorite-section">
              <i class="el-icon-star-on favorite-icon"></i>
              <span class="favorite-text">收藏</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Detail",
  created() {
    // 取出当前点击的商品ID
    console.log("当前查询的ID是" + this.$route.query.id);
    this.loadData(this.$route.query.id);
    // 从session中取出登陆者的信息
    let str = sessionStorage.getItem("user") || "{}";
    // 解析str
    this.user = JSON.parse(str);
    console.log("现在登录的人是" + this.user.username);
    console.log("用户ID是:", this.user.id);
    console.log("用户完整信息:", this.user);
    this.jiazai();
  },
  mounted() {
    // 页面加载完成后启动自动播放
    this.startAutoPlay();
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.stopAutoPlay();
  },
  data() {
    return {
      address: "",
      // 用户的所有收货地址
      userAddresses: [],
      // 用户选择的配送地址
      selectedAddress: null,
      // 商品详情的HTML
      proUrl: "",
      // 购买者的信息
      user: {},
      // 商品的信息
      itemData: {},
      // 购买的数量
      num: 1,
      // 商品图片列表
      imageList: [],
      // 当前选中的图片索引
      currentImageIndex: 0,
      // 轮播相关
      autoPlayTimer: null, // 自动播放定时器
      autoPlayInterval: 3000, // 轮播间隔（毫秒）
      isAutoPlaying: true, // 是否正在自动播放
      // 当前视图：gallery-图集，params-参数
      currentView: 'gallery',
      // 商品参数信息
      itemParams: {},
      // 商品选项信息
      itemOption: {
        sizeOption1: '',
        sizeOption2: '',
        colorOption1: '',
        colorOption2: '',
        agreementText: ''
      },
      // 选中的选项
      selectedOptions: {
        size: '', // 尺寸选择
        color: '', // 颜色分类
        agreement: false, // 协议确认
        deliveryAddress: null // 配送地址
      },
      // 描述内容样式
      rowStyle: {
        'text-align': 'center',
        'height': '65px',
        'font-size': '15px',
        'background': '#FDE2E2',
      },
      // 描述标签样式
      labelStyle: {
        'text-align': 'center',
        'font-size': '15px',
        'background': '#E1F3D8',
      },
      // 价格标红
      rowStyle_price: {
        'text-align': 'center',
        'height': '65px',
        'font-size': '25px',
        'background': '#FDE2E2',
        'color': 'rgba(255,68,0)'
      },
    }
  },
  computed: {
    // 当前显示的图片
    currentImage() {
      return this.imageList[this.currentImageIndex] || '';
    },
    // 检查是否可以加入购物车
    canAddToCart() {
      return this.selectedOptions.size && 
             this.selectedOptions.color && 
             this.selectedOptions.agreement &&
             this.selectedOptions.deliveryAddress;
    },
    // 检查是否可以立即购买
    canBuyNow() {
      return this.selectedOptions.size && 
             this.selectedOptions.color && 
             this.selectedOptions.agreement &&
             this.selectedOptions.deliveryAddress;
    }
  },
  methods: {
    // 加载商品图片列表
    loadItemImages(itemId) {
      request.get('/itemImage/list', {
        params: {
          itemId: itemId
        }
      }).then(res => {
        console.log('商品图片接口返回:', res);
        if (res.code === '0' && res.data && res.data.length > 0) {
          // 从后端获取到图片列表
          this.imageList = res.data.map(img => img.imageUrl);
          console.log('加载的图片列表:', this.imageList);
        } else {
          // 如果没有图片数据，使用默认图片（白1-4.png）
          console.log('未找到商品图片，使用默认图片');
          this.imageList = [
            '/白1.png',
            '/白2.png',
            '/白3.png',
            '/白4.png'
          ];
        }
        this.currentImageIndex = 0;
      }).catch(error => {
        console.error('加载商品图片失败:', error);
        // 加载失败时使用默认图片
        this.imageList = [
          '/白1.png',
          '/白2.png',
          '/白3.png',
          '/白4.png'
        ];
        this.currentImageIndex = 0;
      });
    },
    loadData: function (id) {
      // 加载商品数据
      request.get('/item/one', {
        params: {
          id: id,
        }
      }).then(res => {
        // console.log(res);
        this.itemData = res.data;
        document.title = this.itemData.title;
        
        // 从后端加载商品图片列表
        this.loadItemImages(id);
      });
      // 加载详情数据
      request.get("/itemDetail", {
        params: {
          id: id,
        }
      }).then(res => {
        this.proUrl = res.data.itemDetail;
      });
      
      // 加载商品参数
      request.get("/itemParams/getByItemId", {
        params: {
          itemId: id,
        }
      }).then(res => {
        console.log('参数接口完整返回:', res);
        if (res.code === '0' && res.data) {
          this.itemParams = res.data;
          console.log('获取商品参数:', this.itemParams);
          console.log('动漫地区值:', this.itemParams.animeRegion);
        } else {
          console.warn('接口返回但无数据:', res);
        }
      }).catch(error => {
        console.error('获取商品参数失败:', error);
      });
      
      // 加载商品选项
      request.get("/itemOption/getByItemId", {
        params: {
          itemId: id,
        }
      }).then(res => {
        console.log('商品选项接口返回:', res);
        if (res.code === '0' && res.data) {
          this.itemOption = res.data;
          console.log('获取商品选项:', this.itemOption);
        } else {
          console.warn('商品选项接口返回但无数据:', res);
          // 如果没有数据，使用默认值
          this.itemOption = {
            sizeOption1: '定金(备注电话,包邮+特典)',
            sizeOption2: '全款798,定金158,尾款640',
            colorOption1: '标准版',
            colorOption2: '豪华版',
            agreementText: '下单同意定金虚拟发货'
          };
        }
      }).catch(error => {
        console.error('获取商品选项失败:', error);
        // 如果接口失败，使用默认值
        this.itemOption = {
          sizeOption1: '定金(备注电话,包邮+特典)',
          sizeOption2: '全款798,定金158,尾款640',
          colorOption1: '标准版',
          colorOption2: '豪华版',
          agreementText: '下单同意定金虚拟发货'
        };
      });
    },
    // 选择图片
    selectImage(index) {
      this.currentImageIndex = index;
      // 用户手动选择时，重启轮播
      this.restartAutoPlay();
    },
    // 上一张图片
    prevImage() {
      if (this.currentImageIndex > 0) {
        this.currentImageIndex--;
      } else {
        // 循环到最后一张
        this.currentImageIndex = this.imageList.length - 1;
      }
      this.restartAutoPlay();
    },
    // 下一张图片
    nextImage() {
      if (this.currentImageIndex < this.imageList.length - 1) {
        this.currentImageIndex++;
      } else {
        // 循环到第一张
        this.currentImageIndex = 0;
      }
      this.restartAutoPlay();
    },
    // 开始自动播放
    startAutoPlay() {
      if (this.autoPlayTimer) return; // 防止重复启动
      this.isAutoPlaying = true;
      this.autoPlayTimer = setInterval(() => {
        // 自动切换到下一张
        if (this.currentImageIndex < this.imageList.length - 1) {
          this.currentImageIndex++;
        } else {
          this.currentImageIndex = 0; // 循环播放
        }
      }, this.autoPlayInterval);
    },
    // 停止自动播放
    stopAutoPlay() {
      if (this.autoPlayTimer) {
        clearInterval(this.autoPlayTimer);
        this.autoPlayTimer = null;
        this.isAutoPlaying = false;
      }
    },
    // 重启自动播放
    restartAutoPlay() {
      this.stopAutoPlay();
      this.startAutoPlay();
    },
    // 鼠标悬停时暂停
    handleMouseEnter() {
      this.stopAutoPlay();
    },
    // 鼠标移出时继续
    handleMouseLeave() {
      this.startAutoPlay();
    },
    // 切换视图（图集/参数）
    switchView(view) {
      this.currentView = view;
      console.log('切换到视图:', view);
    },
    buy() {
      // 验证是否选择了所有选项
      if (!this.canBuyNow) {
        this.$message.error('请先选择所有必选项：尺寸、颜色分类、协议和配送地址');
        return;
      }
      
      request.get("/order/buy",{
        params:{
          itemId: this.itemData.id,
          userId: this.user.id,
          count: this.num
        }
      }).then(res => {
        this.$message.success("即将进入支付页面");
        // 直接通过返回的链接打开新窗口
        alert("即将进入支付页面，请注意支付环境安全");
        window.open("/Success.html", '_blank');
        window.location.href = window.location.href;
      })
    },
    handleChange(){
    },
    decreaseQuantity() {
      if (this.num > 1) {
        this.num--;
      }
    },
    increaseQuantity() {
      this.num++;
    },
    // 选择尺寸
    selectSize(size) {
      this.selectedOptions.size = size;
    },
    // 选择颜色分类
    selectColor(color) {
      this.selectedOptions.color = color;
    },
    // 切换协议确认
    toggleAgreement() {
      this.selectedOptions.agreement = !this.selectedOptions.agreement;
    },
    // 选择配送地址
    selectAddress(address) {
      this.selectedAddress = address;
      this.selectedOptions.deliveryAddress = address.id;
      console.log('选择配送地址:', address);
    },
    // 加载模拟地址数据
    loadMockAddresses() {
      this.userAddresses = [
        {
          id: 1,
          userId: this.user.id || 8,
          name: '张三',
          phone: '13800138000',
          address: '上海市 市辖区 黄浦区',
          addDetail: '南京东路123号',
          status: 1
        },
        {
          id: 2,
          userId: this.user.id || 8,
          name: '李四',
          phone: '13900139000',
          address: '北京市 市辖区 朝阳区',
          addDetail: '三里屯456号',
          status: 0
        },
        {
          id: 3,
          userId: this.user.id || 8,
          name: '王五',
          phone: '13700137000',
          address: '广东省 深圳市 南山区',
          addDetail: '科技园789号',
          status: 0
        }
      ];
      console.log('已加载模拟地址数据:', this.userAddresses);
      this.$message.success(`已加载 ${this.userAddresses.length} 个模拟收货地址`);
    },
    addCart(){
      // 验证是否选择了所有选项
      if (!this.canAddToCart) {
        this.$message.error('请先选择所有必选项：尺寸、颜色分类、协议和配送地址');
        return;
      }
      
      this.$confirm('是否确定加入购物车?', {
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        type: 'warning'
      }).
      then(() => {
        request.get('/order/add',{
          params: {
            itemId: this.itemData.id,
            userId: this.user.id,
            count: this.num
          }
        }).
        then(res => {
          this.$message.success("加入购物车成功");
        });
      }).
      catch(() => {
        this.$message({
          type: 'error',
          message: '取消加入购物车'
        });
      });
    },
    jiazai(){
      // 获取用户的所有收货地址
      console.log('开始获取用户地址列表, userId:', this.user.id);
      
      // 如果用户ID不存在，使用测试ID
      const userId = this.user.id || 8;
      console.log('实际使用的userId:', userId);
      
      request.get("/address/list", {
        params: {
          userId: userId
        }
      }).then(res => {
        console.log('地址列表接口响应:', res);
        if (res.code === '0' && res.data) {
          this.userAddresses = res.data;
          console.log('获取到用户地址列表:', this.userAddresses);
          this.$message.success(`成功获取到 ${this.userAddresses.length} 个收货地址`);
        } else {
          console.error('接口返回错误:', res);
          this.$message.error(`获取收货地址失败: ${res.msg || '未知错误'}`);
          this.userAddresses = [];
        }
      }).catch(error => {
        console.error('获取地址列表失败:', error);
        this.$message.error(`获取收货地址失败: ${error.message || '网络错误'}`);
        
        // 如果接口失败，加载模拟数据
        this.loadMockAddresses();
      });
      
      // 保留原有的单个地址获取（如果其他地方需要）
      request.get("/address/one", {
        params: {
          userId: this.user.id
        }
      }).then(res => {
        this.address = res.data;
      })
    }
  }
}
</script>

<style scoped>
/* 全局容器 */
.detail-container {
  background: #f8f9fa;
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, 'Microsoft YaHei', sans-serif;
  padding: 0;
}

/* 商品信息区域 */
.product-section {
  padding: 30px;
  max-width: 100%;
  margin: 0;
  background: white;
  border-radius: 0;
  box-shadow: none;
}

.product-container {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  max-width: 1600px;
  margin: 0 auto;
}

/* 商品图片区域 */
.product-image-section {
  flex: 0 0 680px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  /* 确保左侧内容能够完整显示 */
  min-height: 100vh;
}

/* 图片展示区域（缩略图+主图的容器） */
.image-display-area {
  display: flex;
  gap: 15px;
}

/* 缩略图列表 */
.thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100px;
}

.thumbnail-item {
  width: 100px;
  min-height: 100px;
  height: auto;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: white;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thumbnail-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(247, 147, 30, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumbnail-item:hover {
  border-color: #ff6b35;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.thumbnail-item:hover::before {
  opacity: 1;
}

.thumbnail-item.active {
  border-color: #ff6b35;
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.5);
  transform: scale(1.05);
}

.thumbnail-item.active::before {
  opacity: 1;
}

.thumbnail-item .el-image {
  width: 100%;
  height: auto;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 主图展示区域 */
.main-image-wrapper {
  flex: 1;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  transition: transform 0.3s ease;
  display: block;
}

.product-image:hover {
  transform: scale(1.01);
}

/* 图片切换按钮 */
.image-nav-buttons {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.main-image-wrapper:hover .image-nav-buttons {
  opacity: 1;
}

.nav-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  color: #333;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}

.nav-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
}

.nav-btn:disabled {
  background: rgba(200, 200, 200, 0.5);
  color: #999;
  cursor: not-allowed;
  opacity: 0.3;
}

.nav-btn i {
  font-size: 24px;
  font-weight: bold;
}

/* 图片指示器 */
.image-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85));
  color: white;
  padding: 10px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  letter-spacing: 1px;
}

/* 轮播状态指示器 */
.autoplay-indicator {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  padding: 8px 18px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  animation: pulse 2s ease-in-out infinite;
  z-index: 10;
}

.autoplay-indicator i {
  font-size: 16px;
  animation: spin 2s linear infinite;
}

@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  }
  50% {
    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 图集/参数切换按钮 */
.view-toggle-buttons {
  display: flex;
  gap: 0;
  margin-top: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-shadow: none;
  width: 100%;
}

.toggle-btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: transparent;
  color: #666;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.toggle-btn:not(:last-child) {
  border-right: 2px solid #e8e8e8;
}

.toggle-btn:hover {
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(247, 147, 30, 0.1));
  color: #ff6b35;
  transform: translateY(-2px);
}

.toggle-btn.active {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.toggle-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 4px;
  background: white;
  border-radius: 2px 2px 0 0;
}

/* 参数信息表 */
.params-table-wrapper {
  padding: 20px;
  background: #fff;
  border-radius: 0;
  border: 1px solid #e0e0e0;
  margin-bottom: 15px;
  box-shadow: none;
}

.params-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 3px solid;
  border-image: linear-gradient(90deg, #ff6b35, #f7931e) 1;
  display: inline-block;
  padding-right: 20px;
}

.params-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  background: transparent;
}

.params-table tr {
  transition: all 0.3s ease;
}

.params-table tr:hover {
  transform: translateX(5px);
}

.params-table td {
  padding: 14px 16px;
  text-align: center;
  background: white;
  border: 1px solid #f0f0f0;
}

.params-table td:first-child {
  border-radius: 8px 0 0 8px;
}

.params-table td:last-child {
  border-radius: 0 8px 8px 0;
}

.param-label {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.param-value {
  font-size: 15px;
  color: #ff6b35;
  background: #fff;
  font-weight: 600;
}

.param-sublabel {
  font-size: 12px;
  color: #999;
  padding: 10px 16px;
  background: #f8f9fa;
  font-weight: 500;
}

.param-label-left {
  font-size: 14px;
  color: #666;
  text-align: left;
  background: #f8f9fa;
  font-weight: 600;
}

.param-value-left {
  font-size: 15px;
  color: #333;
  text-align: left;
  background: #fff;
  font-weight: 600;
}

/* 商品信息区域 */
.product-info-section {
  flex: 1;
  padding: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  /* 粘性定位 - 滚动时固定 */
  position: sticky;
  top: 20px;
  align-self: flex-start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  /* 自定义滚动条样式 */
  scrollbar-width: thin;
  scrollbar-color: #ff6b35 #f0f0f0;
}

/* Webkit浏览器滚动条样式 */
.product-info-section::-webkit-scrollbar {
  width: 6px;
}

.product-info-section::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 3px;
}

.product-info-section::-webkit-scrollbar-thumb {
  background: #ff6b35;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.product-info-section::-webkit-scrollbar-thumb:hover {
  background: #ff4444;
}

/* 商品标题 */
.product-title {
  font-size: 26px;
  font-weight: 700;
  color: #222;
  margin: 0 0 20px 0;
  line-height: 1.5;
  background: linear-gradient(135deg, #333 0%, #666 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 销售标签 */
.sales-tags {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.tag {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #666;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* 价格区域 */
.price-section {
  margin-bottom: 25px;
  padding: 20px;
  background: #fff5f0;
  border-radius: 4px;
  border: 1px solid #ffe8e0;
}

.main-price {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(135deg, #ff4444 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}

/* 配送信息 */
.shipping-info {
  margin-bottom: 30px;
}

.shipping-text,
.return-policy,
.payment-method {
  font-size: 14px;
  color: #666;
  margin: 8px 0;
  line-height: 1.5;
}

/* 选项区域 */
.options-section {
  margin-bottom: 20px;
}

.option-group {
  margin-bottom: 20px;
}

.option-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 12px;
}

.required {
  color: #ff4444;
  font-weight: 600;
}

/* 地址显示样式 */
.selected-address-display {
  color: #ff6b35;
  font-weight: 600;
}

.placeholder-address-display {
  color: #999;
  font-style: italic;
}

.no-address-tip {
  font-size: 13px;
  color: #999;
  margin-top: 5px;
  padding: 8px 12px;
  background: #f0f0f0;
  border-radius: 6px;
  text-align: center;
}

.option-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.option-btn {
  padding: 12px 20px;
  border: 1px solid #e0e0e0;
  background: white;
  color: #333;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
  position: relative;
  overflow: hidden;
}

.option-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(247, 147, 30, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.option-btn:hover {
  border-color: #ff6b35;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);
}

.option-btn:hover::before {
  opacity: 1;
}

.option-btn.active {
  border-color: #ff6b35;
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  transform: translateY(-2px);
}

.option-btn.active::before {
  opacity: 0;
}

/* 协议区域 */
.agreement-section {
  margin-bottom: 20px;
}

/* 数量选择区域 */
.quantity-section {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.quantity-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #f5f5f5;
  color: #333;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.quantity-btn:hover {
  background: #e0e0e0;
}

.quantity-display {
  width: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  font-size: 16px;
  font-weight: 500;
}

.stock-status {
  font-size: 14px;
  color: #ff4444;
}

/* 操作按钮区域 */
.action-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 20px 0;
  border-top: 1px solid #eee;
}

.action-btn {
  flex: 1;
  height: 50px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 200px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.action-btn:hover::before {
  width: 300px;
  height: 300px;
}

.add-cart {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.add-cart:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 107, 53, 0.5);
}

.buy-now {
  background: linear-gradient(135deg, #ff4444 0%, #ff6b35 100%);
  color: white;
  box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

.buy-now:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 68, 68, 0.5);
}

/* 禁用状态样式 */
.action-btn:disabled,
.action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  background: linear-gradient(135deg, #ccc 0%, #999 100%) !important;
  color: #666 !important;
  box-shadow: none !important;
}

.action-btn.disabled:hover {
  transform: none !important;
  box-shadow: none !important;
}

.action-btn.disabled::before {
  display: none;
}

.favorite-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.3s ease;
}

.favorite-section:hover {
  background: #f5f5f5;
}

.favorite-icon {
  font-size: 24px;
  color: #ff6b35;
}

.favorite-text {
  font-size: 12px;
  color: #666;
}

/* 商品详情区域（内联在左侧） */
.detail-section-inline {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 2px solid #e0e0e0;
}

.detail-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0 0 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid #ff6b35;
}

.detail-content {
  background: #fff;
  padding: 20px 0;
  border-radius: 0;
  line-height: 1.6;
}

/* 确保详情图片响应式 */
.detail-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-container {
    padding: 0;
  }
  
  .product-section {
    padding: 15px;
  }
  
  .product-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .product-image-section {
    flex: none;
    flex-direction: column-reverse;
    width: 100%;
  }
  
  .thumbnail-list {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  }
  
  .thumbnail-item {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
  }
  
  .product-image {
    height: 350px;
  }
  
  .nav-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
  
  .image-indicator {
    bottom: 15px;
    padding: 6px 16px;
    font-size: 12px;
  }
  
  /* 移动端取消粘性定位 */
  .product-info-section {
    position: relative;
    top: auto;
    max-height: none;
    overflow-y: visible;
  }
  
  .action-section {
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
  }
  
  .action-btn {
    max-width: none;
    width: 100%;
  }
  
  .quantity-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .params-table-wrapper {
    padding: 15px;
  }
  
  .params-table td {
    padding: 10px 8px;
    font-size: 13px;
  }
  
  .param-label,
  .param-value {
    font-size: 14px;
  }
  
  .param-sublabel {
    font-size: 11px;
    padding: 6px 8px;
  }
  
  .param-label-left,
  .param-value-left {
    font-size: 13px;
  }
}
</style>
